Michael Murdock's profile

::: StarPort: VR app design process :::

::::::::::: ::::::::::: :::::::::::
StarPort is a virtual reality social app designed for mobile devices. It features small social games that are played with one other person via networked multiplayer. 
 
 
I've made notes on many of the important VR art decisions I made through the design process.
 
::::::::::: ::::::::::: :::::::::::
StarPort is available to try now on the Samsung GearVR! 
Vote for it if you like our project!
 
If you have a PC and a DK2 (Untested on DK1) you can download it here:
 
::::::::::: ::::::::::: :::::::::::
 
 
::::::::::: ::::::::::: :::::::::::
Sculping the Starport logo! The logo appears in the Menu Environment, as a slowly rotating planet. Again, I designed maximum parallax into the logo, when the clouds are added, and this is in motion, you really feel the scale and 'volume' of the object
 
For the logo design, we wanted to make something that 'felt' 3d.
Starport was designed to be comfortable, yet awe-inspiring. A combination of user-centric environment design and immense space backdrops helped us accomplish both goals.
Here's Starport in action. The video shows 3 different environments and gameplay from both included games.
Right before starting Starport for the VR Jam, we worked on the pilot episode of Galactic Wrecking Co. an animated virtual reality series. In this episode, you have a VR dance party on the bridge of a starship! The art style greatly influenced the environment design for Starport. We figured out how to "fold" environment details around the audience because it looks amazing in VR!
Dark environments and warm lights also look amazing in VR!
This screenshot is a good example of my technique for designing VR environments: I make lots of layers of geometry to give the user maximum parallax. In the real world, people use parallax to understand how deep spaces are. By layering lots of different 'parallax planes' (The railings, the computer consoles, the window, and finally the planet) Just by moving their head around a little bit, the audience can 'feel' the 3d space better. This really grounds the user in the experience and helps them feel present. 
Original concept art from CastleBuild
AstroBump concept art. This game was iterated on a lot in VR, originally players were going to 'gaze blast' asteroids at their opponent. We scratched this idea because it didn't feel 'VR' enough ... it could be done in a 2D game. The final version moved the scoring mechanism into the space between the players, so we were using both the natural 3d space between opponents as well as simulated physics to make gameplay chaotic (plus, physics look AMAZING in VR!!)
Starport was originally going to have a soccer mini game, but we had to cut it due to time restraints! We hope to put it back in soon!
The original design for the flying saucer environment. Notice all the detail on the side . . . the players would never see that!! For the final, we essentially 'folded' all that detail into the space that the user could see and 'feel'.
This was inspired by the film, Contact. Also, it included interesting motion always cycling around the users to keep the environment feeling 'alive'! Unfortunately, I didn't have time to get this concept into the final app.
Koala Dolla Bill was the first avatar I built, I wanted to make him feel rounded rather than too 'polygon' looking. Because our avatar rigs were going to be fully dynamic, the character was designed to 'rotate' in 3d space and look interesting.
 
This is a classical animation character design trick from the 2D days... look at one of the earliest Donald Duck designs. It's a nice looking character design, but it doesn't animate very smoothly due to all the pointy shapes. Over the years he got more rounded because it's easier for animators to draw circles, and for them to 'rotate' the forms in 3d.
 
All Starport Avatars are also designed to 'rotate' nicely in 3d to give the users a good sense of the volume of the character in VR.
The gangs all here! Avatars from left to right: Bleep the Robot, Koala Dolla Bill, and Tod the Pirate. (and a stray mouse cursor from the screencap) I'm still designing a couple including an Amelia Earhart style pilot, and one of the astronauts from Galactic Wrecking Co. We'll get them in the next update!!
We spent A LOT of time getting the avatars to feel 'human'. In this animation test, you can see how the avatars look when someone is 'puppeting' them. Using only head orientation (On DK2, avatars also respond to head position) we simulate the entire rig. We did a lot of research on robotics and cartoon character movement to make the avatars lifelike, expressive, and ADORABLE.
The original space ship looked like a giant pumpkin! Maybe we'll bring it back as a playable character in the sequel. 

INSIDE THE PUMPKIN!! The problem was this environment felt too claustrophobic, I redesigned the environment to have more open windows, while still providing a 'safe' feeling to the user.

This version of the environment was from before we nailed down the distance between players (7 Meters). Once we locked that down I had to move the support beams out of the way so the players could easily see each other and play the game together.
The first campground draft looked more like the Pee-Wee Herman show sets! 
 
The patterns were specifically designed to show the contours of the geometry, However, the colors of this set are all over the place! The final version (Below) has a more restrained color palette. See the final campground below to see how I changed the patterns to better indicate the 3d depth of the environment
The Final campground environment, we finally got that color pallet under control! The grass texture also has stripes. This is to help the users feel the 'depth' of the scene. (Look up 1 point perspective, for more info) Even though VR stereo rendering gives us depth, I decided to 'help it along' by having the converging lines of the texture accentuate the VR distances
 
For the UFO environment, I decided to recolor the geometry from all blue and grey once I added in the final galaxy background. The vibrant color in the background needed to be echoed in the foreground environment.

This is the first gameplay video we recorded. While we were designing the space and games, we would hop on Skype and talk about game design back in forth from INSIDE the vr world. This led us to create gameplay that was natural and used VR to its fullest. 
::::::::::::::::::::::
The physics simulation needed to be synchronized over the network to make this game possible. Whoever was the first player to join would be the 'host' and run the simulation on their device. We would then stream that data to the 'guest' to make sure everone would see the same thing. To counter connection speed lag, we also employed a predictive physics system that smoothed out the position of the asteroids on for the 'guest' player.
We actually built the arena for the soccer game!! Just didn't have time to get it fully game designed. The game was chosen because almost everyone around the world knows how Soccer is played, we decided to take this known mechanic and give it a VR twist. Also, when people watch soccer games their heads naturally follow the ball around the field. This insight sparked the idea of a small 3 vs 3 game of soccer that is played by AI agents on the field, and casually controlled by the user. And, like watching real soccer, the fans will always follow the ball anyway, so it's very natural experience. 
The final coloring on the flying saucer environment!
 
I also do a trick in my environment design for VR where I make 'pools' of light in the space around the user. This naturally lets the player focus on the space immediately surrounding them. I designed this space to feel balanced (It's perfectly symmetrical) so that users would feel calm and stable when they're inside it. 
 
The environment is also small and users can easily see everything around them. Because users can't walk around in Starport, if they can easily understand the environment, they're less likely to desire the ability to move around.
 
That being said, we're working on really great and comfortable movement mechanic . . . it just didn't make it in because of time constraints! :)
Doing a lighting test for the CastleBuild arena, too bad we couldn't use real time shadows due to frame rate issues, but trust me, they look amazing! We ended up baking a lot of lighting into the environments and using light probes for the real-time elements that needed to move (Platforms, game objects, characters)
 
Also note the 'layers' of color and geometry. As mentioned above, this is to give users more sense of 3d space through controlling the parallax of the scene. 
Where did all my shaders go?!?!?!  We initially tried using Alloy shaders, but the GearVR couldn't handle them. (They looked AMAZING though) I had to rip them out of the project once we realized we couldn't get the performance we needed.
First draft of the 'home menu' environment, This is a safe, comfortable environment that has a sense of wonder. Hence, the galaxies all around you! Again, this environment features perfect symmetry to make users feel stable and comfortable in VR. The layout was also designed to have lots of parallax layers to show off stereoscopic depth.
 
The colors were chosen to be calming and friendly; breaking away from the typical gunmetal greys and monotone colors from a lot of sci-fi art.  
I also removed the Starport logo text for the final ... it seemed rude to make users stare at our logo . . . I wanted the feeling of our worlds to be the thing they remembered . . . not our logo
 
You can see the color choices better here: I watched a lot of the original Star Trek movies and loved the bright, saturated colors in their sets. 
 
I think this is the last version of this environment I did before we realized we had to scrap it and move on because we didn't have time. Parts of it made their way into the Flying Saucer environment though.
Starport was also intended to have a full day/night cycle. While it looked great, it ran too slowly on the GearVR device, so we had to scrap it. If you have a PC DK2, you can try it out here: https://mega.co.nz/#!79kDETCR!izvTsH1r5TQTPHX242EN-uczqTe2f1SQAy65CI86n9w 
 
It's still on our feature list of things to optimize when we have the chance!
Designing the shield generator object for AstroBump, Here I'm checking to make sure all my normals are pointing the right way, so I don't get render errors in Unity.
An early screenshot from inside the Flying Saucer environment. This shows what I've been calling a 'VR Canopy'... Notice all the environments I make have geometry above the users. (the Campground has a giant pipeline) This is to safely wrap the user with geometry while giving them something interesting to look at above them. I add in 'VR Canopies' so that half the VR world (The sky) isn't devoid of stereoscopic depth and parallax.
Final version of the StarShuttle home environment. I love the feeling of Christmas lights hanging on a ceiling in a dimly lit room. I recreated this feeling by wrapping lighting panels around the user. Since this is the first thing every users see once our app launches, I wanted to give them a great first impression.
If you made it this far . . . thanks for reading!! I hope getting out my ideas on VR design will be helpful to the amazing development community in virtual reality! Let me know if you have any questions!
 
And if you appreciate this project, PLEASE PLEASE show your support and vote for it here:
 
 
::: StarPort: VR app design process :::
Published:

::: StarPort: VR app design process :::

Starport is currently in development for mobile VR devices. It is a small networked social app for Virtual Reality.

Published: